<template>
  <view class="user-center">
    <!-- 用户信息 -->
    <view class="user-info">
      <view class="avatar-section">
        <image class="avatar" :src="userInfo.avatar" mode="aspectFill"></image>
        <view class="edit-avatar" @click="changeAvatar">
          <uni-icons type="camera" size="20" color="#fff"></uni-icons>
        </view>
      </view>
      <view class="info-section">
        <text class="nickname">{{userInfo.nickname}}</text>
        <text class="phone">{{userInfo.phone}}</text>
      </view>
    </view>
    
    <!-- 订单状态 -->
    <view class="order-status">
      <view class="status-header" @click="goOrderList">
        <text class="title">我的订单</text>
        <view class="more">
          <text>查看全部</text>
          <uni-icons type="arrowright" size="16" color="#999"></uni-icons>
        </view>
      </view>
      <view class="status-list">
        <view class="status-item" @click="goOrderList('1')">
          <uni-icons type="wallet" size="28" color="#ff2d4a"></uni-icons>
          <text>待付款</text>
        </view>
        <view class="status-item" @click="goOrderList('2')">
          <uni-icons type="gift" size="28" color="#ff2d4a"></uni-icons>
          <text>待发货</text>
        </view>
        <view class="status-item" @click="goOrderList('3')">
          <uni-icons type="car" size="28" color="#ff2d4a"></uni-icons>
          <text>待收货</text>
        </view>
        <view class="status-item" @click="goOrderList('4')">
          <uni-icons type="chat" size="28" color="#ff2d4a"></uni-icons>
          <text>待评价</text>
        </view>
        <view class="status-item" @click="goOrderList('5')">
          <uni-icons type="refreshempty" size="28" color="#ff2d4a"></uni-icons>
          <text>退款/售后</text>
        </view>
      </view>
    </view>
    
    <!-- 功能列表 -->
    <view class="function-list">
      <view class="function-item" @click="goAddressList">
        <view class="left">
          <uni-icons type="location" size="20" color="#ff2d4a"></uni-icons>
          <text>收货地址</text>
        </view>
        <uni-icons type="arrowright" size="16" color="#999"></uni-icons>
      </view>
      <view class="function-item" @click="goCouponList">
        <view class="left">
          <uni-icons type="medal" size="20" color="#ff2d4a"></uni-icons>
          <text>优惠券</text>
        </view>
        <uni-icons type="arrowright" size="16" color="#999"></uni-icons>
      </view>
      <view class="function-item" @click="goCollectList">
        <view class="left">
          <uni-icons type="star" size="20" color="#ff2d4a"></uni-icons>
          <text>我的收藏</text>
        </view>
        <uni-icons type="arrowright" size="16" color="#999"></uni-icons>
      </view>
      <view class="function-item" @click="goCustomerService">
        <view class="left">
          <uni-icons type="headphones" size="20" color="#ff2d4a"></uni-icons>
          <text>联系客服</text>
        </view>
        <uni-icons type="arrowright" size="16" color="#999"></uni-icons>
      </view>
      <view class="function-item" @click="goSetting">
        <view class="left">
          <uni-icons type="gear" size="20" color="#ff2d4a"></uni-icons>
          <text>设置</text>
        </view>
        <uni-icons type="arrowright" size="16" color="#999"></uni-icons>
      </view>
    </view>
    
    <!-- 退出登录 -->
    <view class="logout-btn" @click="logout">
      <text>退出登录</text>
    </view>
  </view>
</template>

<script>
export default {
  data() {
    return {
      userInfo: {
        avatar: '/static/avatar.png',
        nickname: '用户名',
        phone: '138****8888'
      }
    }
  },
  methods: {
    changeAvatar() {
      uni.chooseImage({
        count: 1,
        sizeType: ['compressed'],
        sourceType: ['album'],
        success: (res) => {
          this.userInfo.avatar = res.tempFilePaths[0]
          // 实际项目中这里应该上传图片到服务器
        }
      })
    },
    goOrderList(status) {
      uni.navigateTo({
        url: `/pages/order/list?status=${status}`
      })
    },
    goAddressList() {
      uni.navigateTo({
        url: '/pages/user/address/list'
      })
    },
    goCouponList() {
      uni.navigateTo({
        url: '/pages/user/coupon/list'
      })
    },
    goCollectList() {
      uni.navigateTo({
        url: '/pages/user/collect/list'
      })
    },
    goCustomerService() {
      uni.navigateTo({
        url: '/pages/user/service/index'
      })
    },
    goSetting() {
      uni.navigateTo({
        url: '/pages/user/setting/index'
      })
    },
    logout() {
      uni.showModal({
        title: '提示',
        content: '确定要退出登录吗？',
        success: (res) => {
          if (res.confirm) {
            uni.showLoading({
              title: '退出中...'
            })
            // 模拟API请求
            setTimeout(() => {
              uni.hideLoading()
              uni.reLaunch({
                url: '/pages/login/index'
              })
            }, 1000)
          }
        }
      })
    }
  }
}
</script>

<style>
.user-center {
  padding: 20rpx;
  background-color: #f7f7f7;
  min-height: 100vh;
}
.user-info {
  display: flex;
  align-items: center;
  padding: 30rpx;
  margin-bottom: 20rpx;
  background-color: #fff;
  border-radius: 10rpx;
}
.avatar-section {
  position: relative;
  margin-right: 30rpx;
}
.avatar {
  width: 120rpx;
  height: 120rpx;
  border-radius: 50%;
}
.edit-avatar {
  position: absolute;
  right: 0;
  bottom: 0;
  width: 40rpx;
  height: 40rpx;
  background-color: #ff2d4a;
  border-radius: 50%;
  display: flex;
  justify-content: center;
  align-items: center;
}
.info-section {
  flex: 1;
}
.nickname {
  font-size: 32rpx;
  color: #333;
  font-weight: bold;
  margin-bottom: 10rpx;
  display: block;
}
.phone {
  font-size: 28rpx;
  color: #666;
}
.order-status {
  padding: 30rpx;
  margin-bottom: 20rpx;
  background-color: #fff;
  border-radius: 10rpx;
}
.status-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 30rpx;
}
.title {
  font-size: 32rpx;
  color: #333;
  font-weight: bold;
}
.more {
  display: flex;
  align-items: center;
}
.more text {
  font-size: 24rpx;
  color: #999;
  margin-right: 10rpx;
}
.status-list {
  display: flex;
  justify-content: space-between;
}
.status-item {
  display: flex;
  flex-direction: column;
  align-items: center;
}
.status-item text {
  font-size: 24rpx;
  color: #666;
  margin-top: 10rpx;
}
.function-list {
  padding: 0 30rpx;
  margin-bottom: 20rpx;
  background-color: #fff;
  border-radius: 10rpx;
}
.function-item {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 30rpx 0;
  border-bottom: 1rpx solid #f1f1f1;
}
.function-item:last-child {
  border-bottom: none;
}
.left {
  display: flex;
  align-items: center;
}
.left text {
  font-size: 28rpx;
  color: #333;
  margin-left: 20rpx;
}
.logout-btn {
  height: 90rpx;
  line-height: 90rpx;
  text-align: center;
  background-color: #fff;
  color: #ff2d4a;
  font-size: 32rpx;
  border-radius: 10rpx;
  margin-top: 20rpx;
}

.login-tip {
  text-align: center;
  padding: 40rpx 0;
  color: #666;
  font-size: 28rpx;
}
</style>